<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${list1[0].productName}&nbsp${list1[0].productOperator}4G手机</title>
<link rel="stylesheet" type="text/css" href="css/style4.css" />
<link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/jdf/1.0.0/unit/??ui-base/1.0.0/ui-base.css,shortcut/2.0.0/shortcut.css,global-header/1.0.0/global-header.css,myjd/2.0.0/myjd.css,nav/2.0.0/nav.css,shoppingcart/2.0.0/shoppingcart.css,global-footer/1.0.0/global-footer.css,service/1.0.0/service.css" />
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/sf.js"></script>
<script src="js/citys.js"></script>
<script src="js/jquery-1.8.0.js"></script>
<script src="js/newAddress.js"></script>
<script>
function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) {
    var moveX = x - l - (h_w / 2);
    //鼠标区域距离
    var moveY = y - t - (h_h / 2);
    //鼠标区域距离
    if (moveX < 0) {
        moveX = 0
    }
    if (moveY < 0) {
        moveY = 0
    }
    if (moveX > imgbox.width() - h_w) {
        moveX = imgbox.width() - h_w
    }
    if (moveY > imgbox.height() - h_h) {
        moveY = imgbox.height() - h_h
    }
    //判断鼠标使其不跑出图片框
    var zoomX = showbox.width() / imgbox.width()
    //求图片比例
    var zoomY = showbox.height() / imgbox.height()

    showbox.css({
        left: -(moveX * zoomX),
        top: -(moveY * zoomY)
    })
    hoverbox.css({
        left: moveX,
        top: moveY
    })
    //确定位置

}

function Zoomhover(imgbox, hoverbox, showbox) {
    var l = imgbox.offset().left;
    var t = imgbox.offset().top;
    var w = hoverbox.width();
    var h = hoverbox.height();
    var time;
    $(".probox img,.hoverbox").mouseover(function(e) {
        var x = e.pageX;
        var y = e.pageY;
        $(".hoverbox,.showbox").show();
        hoverbox.css("opacity", "0.3")
        time = setTimeout(function() {
            Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
        }, 1)
    }).mousemove(function(e) {
        var x = e.pageX;
        var y = e.pageY;
        time = setTimeout(function() {
            Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
        }, 1)
    }).mouseout(function() {
        showbox.parent().hide()
        hoverbox.hide();
    })
}
$(function() {
    Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img"));
	
    	$(".tp1").mouseenter(function(){
    		$(".f1").css("display","block");
    		$(".f6").css("display","block");
    		
    		$(".f2").css("display","none");
    		$(".f7").css("display","none");
    		
    		$(".f3").css("display","none");
    		$(".f8").css("display","none");
    		
    		$(".f4").css("display","none");
    		$(".f9").css("display","none");
    		
    		$(".f5").css("display","none");
    		$(".f10").css("display","none");
    		
    		$(".tp1").css("border","2px solid #0033FF");
    		$(".tp2").css("border","none");
    		$(".tp3").css("border","none");
    		$(".tp4").css("border","none");
    		$(".tp5").css("border","none");
    	});
    	
    	$(".tp2").mouseenter(function(){
    		$(".f2").css("display","block");
    		$(".f7").css("display","block");
    		
    		$(".f1").css("display","none");
    		$(".f6").css("display","none");
    		
    		$(".f3").css("display","none");
    		$(".f8").css("display","none");
    		
    		$(".f4").css("display","none");
    		$(".f9").css("display","none");
    		
    		$(".f5").css("display","none");
    		$(".f10").css("display","none");
    		
    		$(".tp2").css("border","2px solid #0033FF");
    		$(".tp1").css("border","none");
    		$(".tp3").css("border","none");
    		$(".tp4").css("border","none");
    		$(".tp5").css("border","none");
    	});
    	
    	$(".tp3").mouseenter(function(){
    		$(".f3").css("display","block");
    		$(".f8").css("display","block");
    		
    		$(".f1").css("display","none");
    		$(".f6").css("display","none");
    		
    		$(".f2").css("display","none");
    		$(".f7").css("display","none");
    		
    		$(".f4").css("display","none");
    		$(".f9").css("display","none");
    		
    		$(".f5").css("display","none");
    		$(".f10").css("display","none");
    		
    		$(".tp3").css("border","2px solid #0033FF");
    		$(".tp1").css("border","none");
    		$(".tp2").css("border","none");
    		$(".tp4").css("border","none");
    		$(".tp5").css("border","none");
    	});
    	
    	$(".tp4").mouseenter(function(){
    		$(".f4").css("display","block");
    		$(".f9").css("display","block");
    		
    		$(".f1").css("display","none");
    		$(".f6").css("display","none");
    		
    		$(".f2").css("display","none");
    		$(".f7").css("display","none");
    		
    		$(".f3").css("display","none");
    		$(".f8").css("display","none");
    		
    		$(".f5").css("display","none");
    		$(".f10").css("display","none");
    		
    		$(".tp4").css("border","2px solid #0033FF");
    		$(".tp1").css("border","none");
    		$(".tp2").css("border","none");
    		$(".tp3").css("border","none");
    		$(".tp5").css("border","none");
    	});
    	
    	$(".tp5").mouseenter(function(){
    		$(".f5").css("display","block");
    		$(".f10").css("display","block");
    		
    		$(".f1").css("display","none");
    		$(".f6").css("display","none");
    		
    		$(".f2").css("display","none");
    		$(".f7").css("display","none");
    		
    		$(".f4").css("display","none");
    		$(".f9").css("display","none");
    		
    		$(".f3").css("display","none");
    		$(".f8").css("display","none");
    		
    		$(".tp5").css("border","2px solid #0033FF");
    		$(".tp1").css("border","none");
    		$(".tp2").css("border","none");
    		$(".tp3").css("border","none");
    		$(".tp4").css("border","none");
    	});
    	
    	$(".a1").click(function(){
    		$("#top1").css("display","block");
    		$(".body2").css("display","block");
    		$(".a1").css("background","#0099ff");
    		$(".a2").css("background","#aaaaaa");
    		$(".a3").css("background","#aaaaaa");
    	});
    	$(".a2").click(function(){
    		$("#top1").css("display","none");
    		$(".body2").css("display","block");
       		$(".a2").css("background","#0099ff");
    		$(".a1").css("background","#aaaaaa");
    		$(".a3").css("background","#aaaaaa");
    	});	
    	$(".a3").click(function(){
    		$("#top1").css("display","none");
    		$(".body2").css("display","none");
       		$(".a3").css("background","#0099ff");
    		$(".a2").css("background","#aaaaaa");
    		$(".a1").css("background","#aaaaaa");
    	});
    	$("input[type=radio]").click(function(){
    		var x=$('input[type=radio]').val();
    		
            if (x != null) {
            	
            	$("#tijiao").attr("disabled",false).css("background","#0099ff");
            }else {
            	$("#tijiao").attr("disabled",true).css("background","#dddddd");
            }
    	});
    	
    	//数量加、减
    	$("#jia").click(function(){
    		var x=$(this).prev();
    		x.val(parseInt(x.val())+1);
    		$(this).next().attr("disabled",false);
    		$(this).next().css("background","#eee");
    	});
    	
    	$("#jian").click(function(){
    		var x=$(this).prev().prev();
    		
    		if(x.val()==1){		
    			$(this).css("background","#ccc");
    			$(this).attr("disabled", true);
    		}else if(x.val()!=0){
    			x.val(parseInt(x.val())-1);	
    			
    		}
    	});

});
function add(id){
	var x=$("#yc").val();
	if(x==''){
		alert("该商品收藏成功！");
		location.href="CollectionServlet?id="+id;
	}
	if(x=='b'){
		alert("该商品已收藏，请不要重复收藏");
	}
	
}

</script>
<style>
.imgbox {
	width:35%;
	position:relative;
	margin-left:50px;
	float:left;
	margin-top:20px;
}
.probox {
	width:100%;
	height:400px;
	border:1px solid #eeeeee;
	overflow:hidden;
}
.probox img{
	width:100%;
	height:400px;
	vertical-align:top;
}
.showbox {
	display:none;
	position:absolute;
	margin-left:10px;
	top:0;
	width:100%;
	height:400px;
	overflow:hidden;
	border:1px solid #eeeeee;
	background:white;
}
.showbox img {
	position:absolute;
	width:200%;
	height:850px;
	
}
.hoverbox {
	display:none;
	position:absolute;
	top:0;
	background:#09f;
	border:1px solid #09f;
	height:140px;
	width:50%;
	cursor:pointer;
	z-index:2;
}

.tp{
	float:left;
	width:100%;
	height:60px;
	padding-top:10px;
}

/* .tp1{
	float:left;
	margin-left:5px;
	
} */

.f1{
	
}

.f6{
	display:block;
}


</style>

<link href="image/favico.ico" rel="shortcut icon" />
</head>
<body>
	
	<div class="main_top">

		<div class="m3">
			<a href="register.jsp" target="_Blank">我的订单</a>
		</div>

		<div class="m2">
			<a href="register.jsp" target="_Blank">免费注册&nbsp&nbsp&nbsp|</a>
		</div>

		<div class="m1">
			<a href="members.jsp" > 
			<c:if test="${empty member[0].memberName}" scope="page" var="result">

        	请登录&nbsp&nbsp&nbsp|

     </c:if> <c:if test="${not result}">

         	${member[0].memberName}&nbsp&nbsp&nbsp|

     </c:if>



			</a>

		</div>

	</div>
	
	
	<div id="d1">
		<div id="t1">
			<a href="homePage.jsp"   target="_Blank">
			<img src="image/1.png" style="float:left; margin-left:60px;">
			</a>
		</div>

		<div id="t2">
			<div id="t4">
				<input id="text"> 
				<input type="button" value="搜索" id="but">
			</div>
		</div>

		<div id="t3">
			<div id="d2">
				 <a href="ShopCart.jsp"  target="_Blank" class="d3">
				 <img src="image/gwc.png"style="float: left; margin-left:3px; margin-top: 3px;">我的购物车</a>
			</div>
		</div>
	</div>

	<div id="d4">
		<div id="t6">手机详细信息</div>
		<div id="t5">
			<a href="Product" class="a">手机首页</a>
			 <a href=""  class="a">手机营业厅</a>
			  <a href="" class="a">配件选购</a>
			   <a href=""  class="a">以旧换新</a>
			    <a href=""  class="a">新Phone尚</a>
			     <a href=""  class="a">玩3C</a>
		</div>
	</div>

	<div class="imgbox">
    	<div class="probox">
    			<div>
        		<img src="${list[0].imgRawAddress}" class="f1"/>
        		alert(${list[0].imgRawAddress});
        		</div>
     		<div class="hoverbox"></div>
    	</div>
    	
    	<%-- <div class="tp">
    		<div class="tp1">
    			<img src="${list1[0].imgRawAddress}">
    		</div>
   		</div> --%>
    	
   		 <div class="showbox">
        		<img src="${list[0].imgRawAddress}" class="f6"/>
   		 </div>
   		 
   		 
   		 <div class="guanzhu" >
   		 	<a onclick="add(${list1[0].productId})" >
   		 		<img src="image/收藏.png" class="sc">关注该商品
   		 		<input type="hidden" value="${b}" id="yc">
   		 	</a>
   		 </div>
   		 
	</div>

	<div id="body">
	<form action="ShopChartServlet" method="get">
		
		<span class="title">${list1[0].productName}&nbsp${list1[0].productOperator}4G手机 双卡双待双通</span>
		<span class="xgg">湖南全网通手机大三元限时秒杀5.17元，月租仅3元；日租卡协议价促销1元350M，限时限量！快来抢购！</span>
			<div class="d1">
			<span class="s1">单价：</span>	
			<span class="s2">￥${list1[0].productPrice}</span>
			</div>
			
			<div class="d2">
				<span class="s1">配送至：</span>	
					所在省份：<select id="one" name="sf"></select>
					所在城市：<select id="two" name="city"></select>
				<br><span class="s3">由 顺丰 发货，并提供售后服务。23:00前完成下单,预计后天天送达</span><br>
			</div>
			
		<div class="h1">
			<span class="s4">
				颜色：	<c:forEach items="${color}"  var="c" >
							<input type="radio" name="color" value="${c.colorName}">${c.colorName}
						</c:forEach>
			</span>	
				<br><br>尺寸：${size}寸
				
		</div>
		
			<div class="k"> 
				<input id="txt" value="1" name="sl">
				<input type="button" value="+" id="jia">
				<input type="button" value="-" id="jian">
				<span></span>
			</div>
			
			<input type="submit" value="加入购物车" id="tijiao" disabled="disabled">
			<input type=hidden value="x" name="tag">
			<input type=hidden value="${list1[0].productId}" name="id">
			<input type=hidden value="${list1[0].productName}" name="name">
			<input type=hidden value="${list1[0].productOperator}" name="operator">
			<input type=hidden value="${list1[0].productPrice}" name="price">
			<input type=hidden value="${list1[0].productPrint}" name="tp">
			
			<input type=hidden value="${size}" name="size">
		</form>
	</div>

	<div id="bottom">
		<div class="a1">
			<span class="span1">商品介绍</span>
		</div>
		
		<div class="a2">
			<span class="span1">商品规格</span>
		</div>
	
		
		<div class="a3">
			<span class="span1">商品评价</span>
		</div>
		<div class="a4">
			<div id="top1">
				<div class="tp11">
					<img src="image/品牌.png">
					品牌：${list1[0].productBrand}
				</div>
			
				<div class="tp11">
					<img src="image/手机.png">
					分辨率：2560×1440（Quad HD / 2K ）
				</div>
				
				<div class="tp11">
					<img src="image/摄像头.png">
					后置摄像头：1200万像素<br>
					前置摄像头：1600万像素
				</div>
				
				<div class="tp11">
					<img src="image/CPU.png">
					内核：骁龙820（MSM8996）
				</div>
				
				<div class="tp11">
					<img src="image/系统.png">
					系统：安卓（Android）
				</div>	
					
				<div class="tp11">
					<img src="image/电池.png">
					电池容量：4000mAh-5999mAh
				</div>
					
				<div class="tp11">
					<img src="image/memory内存2.png">
					机身内存：128GB
				</div>		
				
				<div class="tp11">
					<img src="image/运行.png">
					运行内存：6GB
				</div>
			</div>

			<div class="body2">
				<div class="a5">
				<span class="span2"> 主体</span>
				<span class="span3"> 品牌 <br> 型号 <br>  上市时间</span> 
				<span class="span4">${list1[0].productBrand}  <br>${list1[0].productName} <br>${list1[0].productAddtime}</span>

			 </div>

			<div class="a5">
				<span class="span2"> 基本信息 </span>
				<span class="span3">机身颜色<br>机身长度（mm）<br>机身宽度（mm）<br>机身厚度（mm）<br>机身重量（g）<br>输入方式 <br>运营商标志或内容<br>机身材质分类 </span>
				<span class="span4">其他 <br>153.66 <br>73.48<br>8.25 <br> 178<br>触控 <br>无 <br>金属后盖 </span>
			</div>

			<div class="a5">
				<span class="span2">网络支持 </span>
				<span class="span3">双卡机类型<br>最大支持SIM卡数量<br> SIM卡类型 Nano<br>4G网络 4G：<br>3G/2G网络<br>网络频率（2G/3G） 2G：</span>
				<span class="span4">双卡双待单通<br> 2个<br> Nano SIM<br>移动（TD-LTE)；4G：联通(TD-LTE)； 4G：电信(FDD-LTE)<br>3G：移动(TD-SCDMA)；
				3G：联通(WCDMA)；
				3G：电信(CDMA2000)；
				2G：移动（GSM）+联通(GSM)
				4G+（CA） 移动4G+；
				联通4G+；电信4G+ <br>GSM
				850/900/1800/1900；
				3G：TD-SCDMA 1900/2000</span>
			</div>

			<div class="a5">
				<span class="span2">前置摄像头<br> <br>后置摄像头</span>
				<span class="span3">前置摄像头<br>前摄光圈大小<br> 拍照特点<br>摄像头数量  <br>后置摄像头 <br>摄像头光圈大小<br>闪光灯 双色温灯 美颜技术<br>拍照特点 <br></span>
				<span class="span4">1600万像素 <br> f/2.0<br> 美颜<br>2个<br>500万像素；1200万像素 <br>其他<br>支持<br> 防抖；美颜； 微距；全景；滤镜；场景模式； HDR</span>
			</div>

			<div class="a5">
				<span class="span2">存储</span>
				<span class="span3"> ROM<br>RAM <br>  存储卡 <br>屏幕<br>  分辨率 <br>  屏幕材质类型</span>
				<span class="span4">128GB<br> 6GB<br>不支持<br>主屏幕尺寸（英寸） 其他<br>2560×1440（Quad HD / 2K ）<br>uper AMOLED </span> 
			</div>
		</div>
		
		<div class="body3">
			<div class="head">
			<h2>用户评价</h2>
			</div>
			
			<div class="body4">
				好评度
				暂无用户评价
			</div>
		</div>
	</div>
</div>
	

	

	<div style="width: 100%; height: 10%; float: left;">
		<iframe src="foot.jsp" width="100%" height="350px" frameborder="0"scrolling="no"></iframe>
	</div>
</body>
</html>